<template>
  <div class="back-white height-full pt5" style="height: auto">
    <div class="list-caption ml10 f18">稿件效果评估</div>

    <h2 class="list-caption text-center f18 mt14">
      {{ manuInfo.title || '--' }}
      <Button type="primary" class="f14 ml14" size="small" :to="manuInfo.url" target="_blank">查看正文</Button>
    </h2>

    <!-- <div class="manu-info f12 text-center mt30">
      <span>来源：北京日报</span>
      <span>作者：王国峰</span>
      <span>发布时间：{{ manuInfo.time | dateFormat('YYYY年MM月DD日 HH:mm:ss') }}</span>
    </div>
 -->
    <div class="split-line mt30 mb20"></div>

    <div class="ml10 d-flex">
      <div class="data-stat-wrapper">
        <div class="title-line list-caption">池内数据总量统计</div>

        <div class="mt20 d-flex flex-wrap">
          <DataStatItem v-for="(it, i) of entryDataCountStat" :key="i" :item="it"></DataStatItem>
        </div>
      </div>

      <div class="data-stat-wrapper">
        <div class="title-line list-caption">全平台数据总量统计</div>

        <div class="mt20 d-flex flex-wrap">
          <DataStatItem v-for="(it, i) of allPlatformDataCountStat" :key="i" :item="it"></DataStatItem>
        </div>
      </div>
    </div>

    <div class="ml10 mt20">
      <div class="title-line list-caption">池内稿件传播效果情况</div>
      <div class="ml15 mt10 mb4 f13">
        <IconButton icon="alert" width="16" class="pointer-none mr10" :activated="false"></IconButton>
        <span style="vertical-align: super">提示：数据更新至{{ entryManuSpreadEffect.updateTime | dateFormat }}</span>
      </div>
      <CommonTablePage
        height="auto"
        :columns="entryManuSpreadEffect.columns"
        :tableData="entryManuSpreadEffect.data"
        :hide-page="true"
      ></CommonTablePage>
    </div>

    <div class="ml10 mt20">
      <div class="title-line list-caption mb10">最热评论</div>
      <CommonTablePage
        height="auto"
        :columns="hotComment.columns"
        :tableData="hotComment.data"
        :hide-page="true"
      ></CommonTablePage>
    </div>

    <div class="ml10 mt20 d-flex">
      <div class="data-stat-wrapper">
        <div class="title-line list-caption">热度趋势</div>
        <div class="chart-box">
          <CustomChart ref="hotTrend" :is-show="show.hotTrend"></CustomChart>
        </div>
      </div>

      <div class="data-stat-wrapper">
        <div class="title-line list-caption relative">
          媒体贡献度

          <div class="title-oper fw-normal">
            <Select
              v-model="form_mediaContribution.timeType"
              class="form-item--width"
              clearable
              @on-change="handleMediaTimeTypeChange"
            >
              <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
            </Select>

            <DatePicker
              v-show="form_mediaContribution.timeType === '自定义'"
              type="daterange"
              placeholder="请选择"
              style="width: 210px"
              @on-change="handleMediaTimeRange"
            ></DatePicker>
          </div>
        </div>
        <div class="chart-box">
          <CustomChart ref="mediaContribution" :is-show="show.mediaContribution"></CustomChart>
        </div>
      </div>
    </div>

    <div class="ml10 mt20">
      <div class="title-line list-caption relative">
        传播趋势
        <div class="title-oper fw-normal">
          <Select
            v-model="form_spreadTrend.timeType"
            class="form-item--width"
            clearable
            @on-change="handleSpreadTrendTimeTypeChange"
          >
            <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
          </Select>

          <DatePicker
            v-show="form_spreadTrend.timeType === '自定义'"
            type="daterange"
            placeholder="请选择"
            style="width: 210px"
            @on-change="handleSpreadTrendTimeRange"
          ></DatePicker>
        </div>
      </div>
      <div class="chart-box">
        <CustomChart ref="spreadTrend" :is-show="show.spreadTrend"></CustomChart>
      </div>
    </div>
  </div>
</template>

<script>
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import CustomChart from '@/components/common/CustomChart/CustomChart.vue'
import DataStatItem from '/src/components/data/DataStatItem'
// util
import { getEntryManuEffect } from '@/utils/storage.js'
import { createColumns_spread, createColumns_hotComment, createForm } from './service'
import { hotTrendOptions, mediaContributionOptions, spreadTrendOptions } from './options'

import mixin from './mixin'
export default {
  name: 'ManuEffectAssess',

  mixins: [mixin],

  components: { CommonTablePage, CustomChart, DataStatItem },

  data() {
    return {
      formData: createForm(),

      manuInfo: {},

      entryDataCountStat: [
        { icon: 'clicked', text: '点击总量', num: 0, field: 'clickCount' },
        { icon: 'reship', text: '转发总量', num: 0, field: 'forwardNum' },
        { icon: 'comment', text: '评论总量', num: 0, field: 'replyCnt' },
        { icon: 'praise', text: '点赞总量', num: 0, field: 'likeCnt' },
        { icon: 'star', text: '收藏总量', num: 0, field: 'collectNum' },
      ],

      allPlatformDataCountStat: [
        { icon: 'clicked', text: '点击总量', num: 0, field: 'clickAllCount' },
        { icon: 'reship', text: '转发总量', num: 0, field: 'forwardNumAll' },
        { icon: 'comment', text: '评论总量', num: 0, field: 'replyCntAll' },
        { icon: 'praise', text: '点赞总量', num: 0, field: 'likeCntAll' },
        { icon: 'star', text: '收藏总量', num: 0, field: 'collectNumAll' },
      ],

      entryManuSpreadEffect: {
        columns: createColumns_spread(this),
        data: [],
        updateTime: new Date(),
      },

      hotComment: {
        columns: createColumns_hotComment(this),
        data: [],
      },

      form_mediaContribution: createForm(),
      form_spreadTrend: createForm(),

      show: {
        hotTrend: true,
        mediaContribution: true,
        spreadTrend: true,
      },
    }
  },

  computed: {
    id() {
      return this.$route.query.id
    },
  },

  methods: {
    handleMediaTimeRange(date) {
      this.form_mediaContribution.startTime = date[0]
      this.form_mediaContribution.endTime = date[1]
      this.getManuRecently_site(this.id, this.form_mediaContribution)
    },
    handleMediaTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.form_mediaContribution.startTime = ''
        this.form_mediaContribution.endTime = ''
        this.getManuRecently_site(this.id, this.form_mediaContribution)
      }
    },

    handleSpreadTrendTimeRange(date) {
      this.form_spreadTrend.startTime = date[0]
      this.form_spreadTrend.endTime = date[1]
      this.getManuSpreadTrends(this.id, this.form_spreadTrend)
    },
    handleSpreadTrendTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.form_spreadTrend.startTime = ''
        this.form_spreadTrend.endTime = ''
        this.getManuSpreadTrends(this.id, this.form_spreadTrend)
      }
    },

    hotTrend_chart(options) {
      this.$refs['hotTrend'].renderChart(hotTrendOptions(options))
    },

    mediaContribution_chart(options) {
      this.$refs['mediaContribution'].renderChart(mediaContributionOptions(options))
    },

    spreadTrend_chart(options) {
      this.$refs['spreadTrend'].renderChart(spreadTrendOptions(options))
    },
  },

  mounted() {
    const data = getEntryManuEffect()
    this.manuInfo = data
    // console.log('data', data)

    this.getManuStaticsData(this.id)
    this.getManuSpreadEffect(this.id)
    this.getManuHotComment(this.id)
    this.getManuRecently_site(this.id, this.form_mediaContribution)
    this.getManuSpreadTrends(this.id, this.form_spreadTrend)

    /* this.hotTrend_chart({
      xData: ['2024-7-20', '2024-7-21', '2024-7-22', '2024-7-23'],
      data: [150, 230, 224, 218, 135, 147, 260],
    }) */

    /* this.mediaContribution_chart({
      data: [
        { value: 1048, name: '今日头条', selected: true },
        { value: 735, name: '新京报' },
        { value: 580, name: '凤凰网' },
        { value: 484, name: '北京时间' },
        { value: 300, name: '一点资讯' },
      ],
    }) */

    /* this.spreadTrend_chart({
      xData: ['2024-7-20', '2024-7-21', '2024-7-22', '2024-7-23'],
      reshipData: [820, 932, 901, 934, 1290, 1330, 1320],
      readData: [20, 32, 90, 94, 129, 133, 132],
    }) */
  },
}
</script>

<style lang="less" scoped>
.manu-info {
  color: var(--app-text-2);

  span + span {
    margin-left: 150px;
  }
}
.data-stat-wrapper {
  width: 50%;
  flex-shrink: 0;
}
.chart-box {
  height: 340px;
}
</style>
